<template>
    <div class="cms-upload-file">
        <upload class="file-btn" action="" :before-upload="handleFIle">
            <i-button icon="ios-cloud-upload-outline">点击上传</i-button>
        </upload>
        <i-button type="text" v-show="url" @click="modal.show = true">预览图片</i-button>
        <modal v-model="modal.show" :width="700" :closable="false" :styles="{top: 0}">
            <div slot="header" v-if="false"></div>
            <div>
                <img :src="url" alt="" style="width: 100%;">
            </div>
            <div slot="footer">
                <Button size="large" long @click="modal.show = false">关闭</Button>
            </div>
        </modal>
    </div>
</template>

<script>
    import fileUpload from '../lib/fileUnload'

    export default {
        name: "cmsUpload",
        props: {
            value: ''
        },
        data() {
            return {
                url: this.value,
                modal: {
                    show: false
                }
            }
        },
        watch: {
            value(val) {
                this.url = val
            }
        },
        methods: {
            handleFIle(file) {
                fileUpload(file).then(res => {
                    this.url = res.url
                    this.$emit('input', res.url)
                })
                return false
            }
        }
    }
</script>

<style lang="scss">
    .cms-upload-file {
        .file-btn {
            display: inline-block;
        }
    }
</style>
